<template>
	<div class="iInfo" element-loading-text="加载中" v-loading="loading">
		<div class="flex">
			<div class="lumpBox">
				<el-page-header :content="head" @back="$router.go(-1)"></el-page-header>
				<div class="Lbox-content">
					<div class="ibox">
						<div class="flex" style="flex: 0 0 auto;">
							<div class="lumpBox">
								<div class="Lbox-title"><h2>甘特图</h2></div>
								<div class="Lbox-content jindu">
									<div class="gunter">
										<table cellspacing="0" cellpadding="0">
											<thead>
												<tr>
													<td></td>
													<td :colspan="jindu.week_days[0]">第1周</td>
													<td colspan="7" v-for="(week, idx) in new Array(jindu.week_days[2] - 2).fill('').map((i, idx) => idx)" :key="`idx_${idx}`">第{{ idx + 2 }}周</td>
													<td :colspan="jindu.week_days[1]">第{{ jindu.week_days[2] }}周</td>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>{{ jindu.date_start_m }}月</td>
													<td :style="{ width: `${day == 1 && '5%'}` }" v-for="(day, idx) in jindu.days" :key="`idx_${idx}`">{{ day }}</td>
												</tr>
												<tr v-for="(step, idx) in steps.slice(0, 5)" :key="`idx_${idx}`">
													<td>{{ step }}</td>
													<td
														v-for="(day, index) in jindu.days"
														:key="`idx_step_${index}`"
														:class="{
															active: index + 1 >= jindu.step[`${idx * 2}`] && index + 1 <= jindu.step[`${idx * 2 + 1}`],
															exceed: index + 1 >= jindu.step[`${idx * 2}`] && index + 1 < (jindu.step[`${idx * 2 + 1}`] - jindu.step[`${idx * 2}`]) / 3 + jindu.step[`${idx * 2}`],
															success:
																index + 1 >= (jindu.step[`${idx * 2 + 1}`] - jindu.step[`${idx * 2}`]) / 3 + jindu.step[`${idx * 2}`] &&
																index + 1 < ((jindu.step[`${idx * 2 + 1}`] - jindu.step[`${idx * 2}`]) * 2) / 3 + jindu.step[`${idx * 2}`],
															error:
																index + 1 >= ((jindu.step[`${idx * 2 + 1}`] - jindu.step[`${idx * 2}`]) * 2) / 3 + jindu.step[`${idx * 2}`] &&
																index + 1 <= jindu.step[`${idx * 2 + 1}`]
														}"
														@click="showEdit($event, idx, index)"
													>
														<div v-if="index + 1 == jindu.step[`${idx * 2}`]" class="message">{{ step }}</div>
													</td>
												</tr>
												<tr v-for="(step, idx) in jindu.step6" :key="`idx_step5_${idx}`">
													<td v-if="idx == 0" :rowspan="jindu.step6.length">{{ steps[5] }}</td>
													<td
														v-for="(day, index) in jindu.days"
														:key="`idx_${index}`"
														:class="{
															active: index + 1 >= step['s'] && index + 1 <= step['e'],
															exceed: index + 1 >= step['s'] && index + 1 < (step['e'] - step['s']) / 3 + step['s'],
															success: index + 1 >= (step['e'] - step['s']) / 3 + step['s'] && index + 1 < ((step['e'] - step['s']) * 2) / 3 + step['s'],
															error: index + 1 >= ((step['e'] - step['s']) * 2) / 3 + step['s'] && index + 1 <= step['e']
														}"
														@click="showEdit($event, 5, index)"
													>
														<div v-if="index + 1 == step['s']" class="message">{{ step.name }}</div>
													</td>
												</tr>
												<tr v-for="(step, idx) in steps.slice(6)" :key="`idx_${idx + 5}`">
													<td>{{ step }}</td>
													<td
														v-for="(day, index) in jindu.days"
														:key="`idx_step_${index}`"
														:class="{
															active: index + 1 >= jindu.step[`${(idx + 5) * 2}`] && index + 1 <= jindu.step[`${(idx + 5) * 2 + 1}`],
															exceed:
																index + 1 >= jindu.step[`${(idx + 5) * 2}`] &&
																index + 1 < (jindu.step[`${(idx + 5) * 2 + 1}`] - jindu.step[`${(idx + 5) * 2}`]) / 3 + jindu.step[`${(idx + 5) * 2}`],
															success:
																index + 1 >= (jindu.step[`${(idx + 5) * 2 + 1}`] - jindu.step[`${(idx + 5) * 2}`]) / 3 + jindu.step[`${(idx + 5) * 2}`] &&
																index + 1 < ((jindu.step[`${(idx + 5) * 2 + 1}`] - jindu.step[`${(idx + 5) * 2}`]) * 2) / 3 + jindu.step[`${(idx + 5) * 2}`],
															error:
																index + 1 >= ((jindu.step[`${(idx + 5) * 2 + 1}`] - jindu.step[`${(idx + 5) * 2}`]) * 2) / 3 + jindu.step[`${(idx + 5) * 2}`] &&
																index + 1 <= jindu.step[`${(idx + 5) * 2 + 1}`]
														}"
														@click="showEdit($event, idx + 6, index)"
													>
														<div v-if="index + 1 == jindu.step[`${(idx + 5) * 2}`]" class="message">{{ step }}</div>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
						<div class="flex" style="margin-top: 15px;flex: 1;">
							<div class="lumpBox" style="flex: 2 1 auto;">
								<div class="Lbox-title">
									<h2>项目信息</h2>
								</div>
								<div class="Lbox-content apply_details">
									<projectDetails :elForm="elForm" ref="projectDetails"></projectDetails>
								</div>
							</div>
							<div class="lumpBox" style="margin-left: 15px;">
								<div class="Lbox-title"><h2>附件</h2></div>
								<div class="Lbox-content" style="width: 450px;">
									<el-table :data="tableData" border class="table" style="width: 100%" key="tableData">
										<el-table-column prop="file_name" label="附件名称">
										</el-table-column>
										<el-table-column prop="file_code" label="附件编号">
										</el-table-column>
										<el-table-column prop="attach_type" label="附件类型">
										</el-table-column>
										<el-table-column prop="create_time" :formatter="timeFormatter" label="上传时间">
										</el-table-column>
										<el-table-column prop="file_path" label="操作">
											<template slot-scope="scope">
													<el-button type="primary" icon="el-icon-download" size="mini"	@click="delStaff(scope.row.file_path)">下载</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import projectDetails from './popup/project_details.vue'
export default {
	name: 'apply_details',
	data() {
		return {
			tableData: [],
			elForm: {
				type: 1,
				edit: false,
				project_class: 1,
				project_type: 2,
				customer: '',
				project_name: '',
				date1: '',
				date2: '',
				date3: '',
				user: '',
				performance: '',
				remark: '',
				direction: '',
				file: []
			},
			jindu: {
				start_t: '2021-05-08',
				long: 57,
				weeks: [],
				week_days: [],
				days: []
			},
			steps: ['立项申请', '可以申领', '需求评估', '任务分解', '立项/驳回', '研发中', '硬件维护', '样机提交', '整机测试', '申请结项'],
			head: decodeURI(this.$route.query.head),
			loading: false
		};
	},
	components: {projectDetails},
	created() {
		this.$emit('pass', '/apply');
		this.ShowGunter()
	},
	mounted() {},
	methods: {
		timeFormatter(row, col, input) {
			var date = new Date(input);
			var yy = date.getFullYear();
			if (yy < 1900) yy = yy + 1900;
			var MM = date.getMonth() + 1;
			if (MM < 10) MM = "0" + MM;
			var dd = date.getDate();
			if (dd < 10) dd = "0" + dd;
			var hh = date.getHours();
			if (hh < 10) hh = "0" + hh;
			var mm = date.getMinutes();
			if (mm < 10) mm = "0" + mm;
			var ss = date.getSeconds();
			if (ss < 10) ss = "0" + ss;
			return yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
		},
		ShowGunter() {
			const start_t = '2023-12-28'; // 项目开始时间日期
			const start_time = new Date(start_t);
			const week_day = [1, 7, 6, 5, 4, 3, 2]; // 跟据项目开始时间日期的星期 计算第一周剩余多少天， 如 05-08是星期6，第一周剩2天
			const month_day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 每月有多少天
			let isLeafYear = start_time.getFullYear() % 400 == 0 || (start_time.getFullYear() % 100 != 0 && start_time.getFullYear() % 4 == 0);
			// const long = 67; // 项目周期 天
			const long = 9;
			const day_s = start_time.getDate(); // 项目开始时间 哪天
			let month_s = start_time.getMonth(); // 项目开始时间 哪月
			const week_s = start_time.getDay(); // 项目开始时间是星期几
			const week_len = Math.ceil(long / 7); // 项目耗时几周，向上取整
			const week_day_first = week_day[week_s]; // 项目第一周剩余几天
			const week_day_last = (long - week_day_first) % 7 || 7; // 项目最后周剩余几天
			const month_1st_days = month_day[month_s] - (day_s - 1) + (month_s == 1 ? 1 : 0);
			let days = new Array(month_1st_days).fill('').map((i, idx) => idx + day_s);
			let day_total = month_1st_days;
			while (long > day_total) {
				// 跨年了吗？
				if (month_s > 10) {
					isLeafYear = (start_time.getFullYear() + 1) % 400 == 0 || ((start_time.getFullYear() + 1) % 100 != 0 && (start_time.getFullYear() + 1) % 4 == 0);
					month_s = 0;
				}
				let month_2nd_days = month_s + 1 == 2 && isLeafYear == 1 ? month_day[month_s] + 1 : month_day[month_s]; // 第二个月有多少天
				let new_month = new Array(long - day_total > month_2nd_days ? month_2nd_days : long - day_total).fill('').map((i, idx) => idx + 1);
				day_total += month_2nd_days;
				month_s += 1;
				days = days.concat(new_month);
			}
			this.jindu = {
				days,
				start_t,
				long,
				// step: [1, 8, 9, 19, 20, 23, 24, 29, 30, 34, 49, 55, 56, 61, 62, 64, 65, 67], // 进度两个为一组，第一个是开始天数，第二个是结束天数
				step: [1, 8],
				// step6: [{ name: '硬件', s: 35, e: 48 }, { name: '软件', s: 35, e: 48 }, { name: 'UI', s: 42, e: 48 }, { name: '联调', s: 42, e: 48 }],
				step6: [],
				date_start_m: start_time.getMonth() + 1,
				week_days: [week_day_first, week_day_last, week_len]
			};
		},
		showEdit(e, step, idx) {
			let index = idx;
			let className = e.target.className;
			if (e.target.nodeName == 'DIV') {
				let offsetX = e.offsetX;
				const tdWid = e.currentTarget.clientWidth;
				className = e.currentTarget.className;
				index += Math.floor(offsetX / tdWid);
			}
			if (className.indexOf('active') == -1) {
				return;
			}
			var d = new Date(this.jindu.start_t);
			d.setDate(d.getDate() + index);
			let cur_day = `${d.getMonth() + 1}月 ${d.getDate()}日`;
			console.log(step, index, cur_day);
		},
	}
};
</script>
<style lang="scss" scoped>
	.jindu {
		display: flex;
		background-color: #fff;
		z-index: 10;
		position: relative;
		.gunter {
			overflow-x: auto;
			> .btn {
				position: absolute;
				right: 30%;
				top: 20px;
				z-index: 20;
			}
			table {
				border-spacing: 0;
				width: 80%;
				table-layout: fixed;
				border-collapse: separate;
				border-top: 1px solid #c1c6ca;
				border-right: 1px solid #c1c6ca;
				tr td:first-child {
					width: 6%;
				}
				td {
					position: relative;
					border-right: none;
					padding: 10px 0;
					border-bottom: 1px solid #c1c6ca;
					border-left: 1px solid #c1c6ca;
					&.active {
						&.success {
							background-color: aqua !important;
						}
						&.error {
							background-color: red !important;
						}
						&.exceed {
							background-color: orange !important;
						}
						cursor: pointer;
						border-left: none;
						&:first-child {
							border-left: 1px solid #c1c6ca;
						}
					}
					.message {
						position: absolute;
						width: 85px;
						z-index: 10;
						top: 0;
					}
				}
			}
		}
	}
</style>
